<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    :width="isTablet() ? '160px' : '184px' "
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
    :collapsedWidth="64"
  >
    <logo />
    <div class="inner-sider">
      <s-menu
        :collapsed="collapsed"
        :menu="menus"
        :theme="theme"
        :mode="mode"
        @select="onSelect"
        style="padding: 0px 0px;"
      ></s-menu>
      <user-menu
        :collapsed="collapsed"
        :menu="menus"
        :theme="theme"
        :mode="mode"
        @select="onSelect"
        style="padding: 16px 0px;"
      ></user-menu>
    </div>
  </a-layout-sider>
</template>

<script>
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import Logo from '../tools/Logo'
import SMenu from './index'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import UserMenu from '../tools/UserMenu'

export default {
  name: 'SideMenu',
  components: { ALayoutSider, Logo, SMenu, UserMenu },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    }
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background: #000c17;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
}
.sider .logo svg {
  height: 64px;
  width: 64px;
}
.inner-sider{
  // tag
  height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
